<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!doctype html>
<html lang="en">
  	<head>
		<meta charset="utf-8">
  		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  		<title>A3 CCTV</title>
	  	<meta name="description" content="A3 CCTV for Google Hackfiar 2012">
		<meta name="author" content="daclouds">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<link rel="stylesheet" href="stylesheets/reset.css">
		<link rel="stylesheet" href="stylesheets/style.css">
		<link rel="stylesheet" href="stylesheets/bootstrap-combined.min.css">
		<link rel="stylesheet" href="stylesheets/bootstrap-responsive.css">
		
		<script src="js/jquery-1.8.2.min.js"></script>
		<script src="js/jquery.imagesloaded.js"></script>
		<script src="js/jquery.wookmark.js"></script>
		<script src="js/bootstrap.min.js"></script>
		<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
		<script type="text/javascript">

		  var _gaq = _gaq || [];
		  _gaq.push(['_setAccount', 'UA-36189789-1']);
		  _gaq.push(['_trackPageview']);
		
		  (function() {
		    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
		    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
		    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
		  })();
		
		</script>
  	</head>
	<body>
	<div class="navbar navbar-inverse navbar-fixed-top">
		<div class="navbar-inner">
			<div class="container">
				<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
					<span class="icon-bar"></span> <span class="icon-bar"></span><span class="icon-bar"></span>
				</button>
				<a class="brand" href="/">Hackfair 2012</a>
				<div class="nav-collapse collapse">
					<ul class="nav">
						<c:if test="${logoutUrl != null}"><li class=""><a href="#">${nickname}</a></li>
						<li class="">
							<c:if test="${logoutUrl == null}"><a href="${loginUrl}">로그인</a></c:if>
							<c:if test="${logoutUrl != null}"><a href="${logoutUrl}">로그아웃</a></c:if>
						</li>
						<li class=""><a href="/profile">수신 설정</a><li></c:if>
						<li>
							<g:plusone></g:plusone>
						</li>
					</ul>
				</div>
			</div>
		</div>
	</div>
	<div>
			<header>
				<img src="https://developers.google.com/appengine/images/appengine-silver-120x30.gif" alt="Powered by Google App Engine" />
			</header>
			<div id="main">
				<ul id="tiles">
					<c:if test="${fn:length(images)} == 0">
					    <li>
					    	<p>No images</p>
					    </li>
					</c:if>
					<c:forEach var="image" items="${images}">
				        <li>
				        	<img class="img-polaroid" src="/?id=${image.key.id}" />
				        	<p><fmt:formatDate value="${image.properties.date}" pattern="yyyy.MM.dd E hh:mm:ss" />
				        		<i class="icon-trash"><span style="visibility: hidden;">${image.key.id}</span></i>
				        	</p>
				        </li>
					</c:forEach>
					<li>
						<div>
							<form action="/uploadImage" method="post" enctype="multipart/form-data" style="margin:0">
								<input type="hidden" name="location" value="web"/>
								<input type="file" name="imageFile"/>
								<button type="submit" class="btn btn-primary">submit</button>
								<button type="button" class="btn btn-danger" id="takePicture">사진촬영</button>
							</form>
							
						</div>
					</li>
				</ul>
			</div>
			<script type="text/javascript">
				var options = {
					autoResize: true, // This will auto-update the layout when the browser window is resized.
					container: $('#main'), // Optional, used for some extra CSS styling
					offset: 2, // Optional, the distance between grid items
					itemWidth: 260
				};
				$(document).ready(function() {
					var last = ${last};
					$('#tiles li').imagesLoaded(function() {
						var handler = $('#tiles li');
						handler.wookmark(options);  
						$('#tiles li img').click(function() {
							document.location = this.src;
						});
						$('.icon-trash').click(function() {
							var id = $(this).find('span').text();
							$.ajax({
								url: "/?id="+id,
								type: "DELETE"
							}).done(function (data) {
								document.location = "/";
							});
						});
					});
					
					$('#takePicture').click(function() {
						$.get('/send', {
							message : "takePicture"
						}, function() {
							document.location = "/";
						});	
					});
					
				});
			</script>
			<footer>
			</footer>
		</div>
	</body>
</html>